<template>
	<view class="home">
		<view class="ad">
			<image src="../../static/img/01.jpg" mode="scaleToFill" class="image"></image>
		</view>
		<view class="qukuai">
			<view class="shuxian">
			</view>
			<view class="biaoti">
				最新产品
			</view>
			<navigator class="more">
				more>
			</navigator>
		</view>
		<view class="list">
			<navigator class="item">
				<image src="../../static/img/cp01.jpg" mode="widthFix" class="item-img"/>
				<view class="item-title">
					中年妈妈装冬装仿水貂绒外套40岁50中老年女洋气婆婆毛呢
				</view>
			</navigator>
			<navigator class="item">
				<image src="../../static/img/cp02.jpg" mode="widthFix" class="item-img"/>
				<view class="item-title">
					中年妈妈装冬装仿水貂绒外套40岁50中老年女洋气婆婆毛呢
				</view>
			</navigator>
			<navigator class="item">
				<image src="../../static/img/cp03.jpg" mode="widthFix" class="item-img"/>
				<view class="item-title">
					中年妈妈装冬装仿水貂绒外套40岁50中老年女洋气婆婆毛呢
				</view>
			</navigator>
			<navigator class="item">
				<image src="../../static/img/cp04.jpg" mode="widthFix" class="item-img"/>
				<view class="item-title">
					中年妈妈装冬装仿水貂绒外套40岁50中老年女洋气婆婆毛呢
				</view>
			</navigator>
		</view>
		<view class="qukuai">
			<view class="shuxian">
			</view>
			<view class="biaoti">
				最新案例
			</view>
			<navigator class="more">
				more>
			</navigator>
		</view>
		<navigator class="anli" url="">
			<image src="../../static/img/cp01.jpg" mode="widthFix" class="anli-image"></image>
			<view class="anli-jieshao">
				<text class="anli-title1">女洋气婆婆毛呢上衣短款</text>
				<text class="anli-title2">类型：2021年冬款</text>
				<text class="anli-title3">适合：40-50岁中老年女冬装</text>
			</view>
		</navigator>
		<navigator class="anli" url="">
			<image src="../../static/img/cp02.jpg" mode="widthFix" class="anli-image"></image>
			<view class="anli-jieshao">
				<text class="anli-title1">女洋气婆婆毛呢上衣短款</text>
				<text class="anli-title2">类型：2021年冬款</text>
				<text class="anli-title3">适合：40-50岁中老年女冬装</text>
			</view>
		</navigator>
		<view class="qukuai">
			<view class="shuxian">
			</view>
			<view class="biaoti">
				最新资讯
			</view>
			<navigator class="more">
				more>
			</navigator>
		</view>
		<view class="news">
			<view class="news-title">
				2021年春节放假通知
			</view>
			<image src="../../static/img/right.png" mode="widthFix" class="news-icon"></image>
		</view>
		<view class="news">
			<view class="news-title">
				2021年春节放假通知
			</view>
			<image src="../../static/img/right.png" mode="widthFix" class="news-icon"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.home{
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.ad{
	width: 100%;
	height: 150px;
	padding: 5px;
}
.image{
	width: 100%;
	height: 100%;
}
.qukuai{
	display: flex;
	background-color: #e2dcdc;
}
.shuxian{
	width: 3px;
	height: 15px;
	background-color: black;
	margin: 10px;
}
.biaoti{
	flex: 1;
	margin: 5px;
	color: rgb(61, 59, 59);
}
.more{
	margin: 5px;
	color: rgb(90, 88, 88);
}
.list{
	display: flex;
	flex-wrap: wrap;
}
.item{
	width: 50%;
	display: flex;
	flex-direction: column;
	padding: 5px;
	box-sizing: border-box;
}
.item-img{
	width: 100%;
	border: 1px solid #e8e8e8;
}
.item-title{
	font-size: 14px;
	color: gray;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.anli{
	display: flex;
	border-bottom: 1px solid #c0c0c0;
}
.anli-image{
	width: 80px;
	margin: 5px;
}
.anli-jieshao{
	display: flex;
	flex-direction: column;
}
.anli-title1{
	font-size: 16px;
	font-weight: bold;
}
.anli-title2{
	height: 35px;
	line-height: 35px;
	font-size: 14px;
	color: #999999;
}
.anli-title3{
	font-size: 14px;
}
.news{
	display: flex;
	padding: 10px;
	border-bottom: 1px dotted #c0c0c0;
	align-items: center;
}
.news-title{
	flex-grow: 1px;
}
.news-icon{
	width: 16px;
}
</style>
